<template>
    <div>
        <div class="card">
            <div class="d-flex ai-end card-title">
                <div>平台线上结算业务</div>
                <div class="ml-8 fs-14 auxiliary-color">所有需要通过平台线上结算的业务收支汇总</div>
            </div>
            <div class="mt-15 d-flex ai-center jc-between">
                <div class="show-box account-balance flex-1">
                    <div class="w100 h100 d-flex ai-center jc-between">
                        <div class="flex-1">
                            <div class="show-box-text">
                                <span class="mr-7">账户余额(元)</span>
                                <el-popover
                                    v-model:visible="balancePopVisible"
                                    placement="bottom"
                                    title="账户余额说明"
                                    :width="514"
                                    popper-class="explain-pop"
                                    trigger="click">
                                    <template #reference>
                                        <ft-icon name="iconfont icon-icon-tip" size="16" class="cur-pointer"></ft-icon>
                                    </template>
                                    <div class="fs-14 main-color fw-500" style="white-space: nowrap;">
                                        <div>即您在银行监管账户中的余额！</div>
                                        <div>账户的收入来源：【电站结算账单】中【平台结算完成】状态的的订单/清分单！</div>
                                        <div>账户的支出来源：【账户调账账单】/【账户提现账单】中的调账单/提现单！</div>
                                    </div>
                                    <div class="mt-14 fs-16 fw-500 text-center cur-pointer"
                                        style="color: var(--el-color-primary)"
                                        @click="balancePopVisible = false">
                                        我知道了
                                    </div>
                                </el-popover>
                            </div>
                            <div class="show-box-value mt-15 number-ff">
                                {{ info.accountBalance }}
                            </div>
                        </div>
                        <div class="w-120 text-right fs-16 cur-pointer" @click="toPage('/powerStation/financeDetail')">
                            <ft-icon name="iconfont icon-powerStation-finance-account"></ft-icon>
                            查看账户
                        </div>
                    </div>
                </div>
                <div class="show-box account-credited ml-15 flex-1">
                    <div class="w100 h100 d-flex ai-center jc-between">
                        <div class="flex-1">
                            <div class="show-box-text">
                                <span class="mr-7">待入帐金额(元)</span>
                                <el-popover
                                    v-model:visible="creditedPopVisible"
                                    placement="bottom"
                                    title="待入账金额说明"
                                    :width="514"
                                    popper-class="explain-pop"
                                    trigger="click">
                                    <template #reference>
                                        <ft-icon name="iconfont icon-icon-tip" size="16" class="cur-pointer"></ft-icon>
                                    </template>
                                    <div class="fs-14 main-color fw-500 mt-24">
                                        <div>当前平台尚未与您清分结算完成的订单实收金额，待平台结算完成后，会将最终
                                            的实际收入金额汇入您的银行监管账户！</div>
                                    </div>
                                    <div class="mt-20 fs-16 fw-500 text-center cur-pointer"
                                        style="color: var(--el-color-primary)"
                                        @click="creditedPopVisible = false">
                                        我知道了
                                    </div>
                                </el-popover>
                            </div>
                            <div class="show-box-value mt-15 number-ff">
                                {{ info.creditedAmount }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-10 balance-info">
                <div class="content w100 h100 d-flex jc-between bgBox">
                    <div class="flex-1">
                        <div class="d-flex ai-end card-title">
                            <div>上月实际入账</div>
                            <div class="ml-8 fs-14 auxiliary-color">平台清分结算完成并最终汇入企业账户的金额</div>
                        </div>
                        <div class="d-flex number-box">
                            <div class="flex-1 d-flex jc-center flex-column">
                                <div class="fs-46 fw-400 main-color number-ff">{{ info.singleClear }}</div>
                                <div class="fs-14 main-color fw-500">清分账单（单订单模式）</div>
                            </div>
                            <div class="flex-1 d-flex jc-center flex-column">
                                <div class="fs-46 fw-400 main-color number-ff">{{ info.multiClear }}</div>
                                <div class="fs-14 main-color fw-500">清分账单（多订单模式）</div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 ml-15">
                        <div class="d-flex ai-end card-title">
                            <div>上月实际出账</div>
                            <div class="ml-8 fs-14 auxiliary-color">企业账户提现和扣款的金额</div>
                        </div>
                        <div class="d-flex number-box">
                            <div class="flex-1 d-flex jc-center flex-column">
                                <div class="fs-46 fw-400 main-color number-ff">{{ info.withdrawal }}</div>
                                <div class="fs-14 main-color fw-500">账户提现（元）</div>
                            </div>
                            <div class="flex-1 d-flex jc-center flex-column">
                                <div class="fs-46 fw-400 main-color number-ff">{{ info.adjustment }}</div>
                                <div class="fs-14 main-color fw-500">账户调账（元）</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mt-18">
            <div class="d-flex ai-end card-title">
                <div>私域线下结算业务</div>
                <div class="ml-8 fs-14 auxiliary-color">即运营商的专属机构、渠道机构客户的财务数据</div>
            </div>
            <div class="mt-15 d-flex jc-between">
                <div class="flex-1 pt-20 pl-25 pb-22 bgBox">
                    <div class="d-flex ai-end card-title">
                        <div>专属机构</div>
                        <div class="ml-8 fs-14 auxiliary-color">上月充电收入（元）</div>
                    </div>
                    <div class="mt-18 number-ff fs-46 main-color">
                        {{ info.mechanismIncome }}
                    </div>
                </div>
                <div class="flex-1"></div>
            </div>
        </div>
        <div class="card mt-18">
            <div class="d-flex ai-end card-title">
                <div>其他财务数据</div>
            </div>
            <div class="d-flex other-data jc-between ai-center">
                <div v-for="(item, index) in otherData" :key="index" class="item d-flex ai-center">
                    <div class="other-data-item w-50 h-50">
                        <img :src="item.icon" alt="" class="w100 h100">
                    </div>
                    <div class="ml-10">
                        <div class="fs-14 main-color fw-500">{{ item.label }}</div>
                        <div class="fs-12 main-color fw-500">{{ item.value }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
const info = ref({
    accountBalance: 3189.36,
    creditedAmount: 1234.56,
    singleClear: 3189.36,
    multiClear: 0.0,
    withdrawal: -57140.42,
    adjustment: 0.0,
    mechanismIncome: 0.0,
})
const balancePopVisible = ref(false)
const creditedPopVisible = ref(false)
const otherData = ref([
    {
        label: "订单结算汇总",
        icon: "/src/assets/img/finance/orderSettlement.png",
        value: "仅2024-08-01后的订单结算进度"
    }, {
        label: "清分账单汇总",
        icon: "/src/assets/img/finance/clearBill.png",
        value: "单/多订单模式清分单结算进度"
    }, {
        label: "账户调账",
        icon: "/src/assets/img/finance/accountAdjustment.png",
        value: "司机申诉退款/欠款收回等记录"
    }, {
        label: "账户提现",
        icon: "/src/assets/img/finance/accountWithdrawal.png",
        value: "企业账户的提现记录"
    }, {
        label: "Saas服务费",
        icon: "/src/assets/img/finance/serviceFee.png",
        value: "蜂潮智行收取的平台服务费"
    }, {
        label: "引流抽成支出",
        icon: "/src/assets/img/finance/expenses.png",
        value: "第三方流量平台收取的服务费"
    }
])
const router = useRouter()
const toPage = (path) => {
    router.push(path)
}
</script>

<style lang="scss" scoped>
.card {
    padding: 17px 20px;
    background-color: #fff;
    &-title {
        font-weight: 500;
        font-size: 16px;
        color: $light-color;
    }
    .show-box {
        height: 134px;
        background-position: 100% 100%;
        background-size: 100%;
        background-repeat: no-repeat;
        padding: 27px 60px;
        box-sizing: border-box;
        color: #FFFFFF;
        &-title {
            font-size: 14px;
            font-weight: 500;
        }
        &-value {
            font-size: 46px;
            font-weight: 400;
        }
    }
    .account-balance {
        background-image: url('@/assets/img/finance/power-balance.png');
    }
    .account-credited {
        background-image: url('@/assets/img/finance/power-credited.png');
    }
    .balance-info {
        width: 100%;
        height: 152px;
        padding-top: 20px;
        box-sizing: border-box;
        position: relative;
        &::before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 60px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 20px 20px 20px;
            border-color: transparent transparent #F0F6FE transparent;
        }
        .content {
            padding: 13px 26px;
            box-sizing: border-box;
        }
    }
    .bgBox {
        background-color: #F0F6FE;
        border-radius: 4px;
    }
    .number-box {
        height: calc(100% - 21px);
    }
}
</style>
<style lang="scss">
.explain-pop {
    padding: 10px 12px !important;
    .el-popover__title {
        text-align: center;
        color: $main-color;
        font-size: 14px;
        font-weight: 500;
    }
}
</style>